<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>axios</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="node_modules/vue/dist/vue.js"></script>
		<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

	<body>
		<div id="app" class="container">
			<h1>vue-resource插件讲解</h1>
			<a class="btn btn-primary" href="javascript:;" @click="get">GET请求 </a>
			<a class="btn btn-primary" href="javascript:;" @click="post">POST请求</a>
			<a href="javascript:;" class="btn btn-primary" @click="http">HTTP</a>
			{{msg}}
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					msg: ''
				},
				mounted() {
					axios.interceptors.request.use((conf) => {
						console.log('request init')
						return conf
					})

					axios.interceptors.response.use((res) => {
						console.log('response init')
						return res
					})
				},
				methods: {
					get() {
						axios.get('package.json', {
								params: {
									userid: '11'
								},
								headers: {
									token: 'jack'
								}
							})
							.then((res) => {
								this.msg = res.data
							})
							.catch((err) => {
								console.log('error init' + err)
							})
					},
					post() {
						axios.post('package.json', {
							userid: '22'
						}, {
							headers: {
								token: 'tom'
							}
						}).then((res) => {
							this.msg = res.data
						}).catch((err) => {
							console.log('err init ' + err)
						})
					},
					http() {
						axios({
							url: 'package.json',
							method: 'get',
							params: {
								userId: '1122'
							},
							headers: {
								token: 'http-test'
							}
						}).then((res) => {
							this.msg = res.data
						})
					}
				}
			});
		</script>
	</body>

</html>